<template>
    <div class="form-container">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">硕士学位申请系统</el-breadcrumb-item>
            <el-breadcrumb-item>学位申请批复</el-breadcrumb-item>
        </el-breadcrumb>
        <h2>学位申请批复</h2>
        <!--        <el-tag studentId="is_saved" type="danger">未保存</el-tag>-->

        <el-form ref="form" :model="form" label-width="180px" class="form">
            <el-form-item label="学号" prop="student_id">
                <el-input v-model="form.student_id" auto-complete="off"></el-input>
            </el-form-item>

            <el-form-item label="姓名" prop="paperName">
                <el-input v-model="form.student_name" auto-complete="off"></el-input>
            </el-form-item>

            <el-form-item label="院系所" prop="college">
                <el-select v-model="form.college" placeholder="请选择">
                    <el-option
                            v-for="college in form.colleges"
                            :key="college.value"
                            :label="college.label"
                            :value="college.value"
                    ></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="硕士专业" prop="studentMajor">
                <el-select v-model="form.student_major" placeholder="请选择">
                    <el-option
                            v-for="studentMajor in form.student_majors"
                            :key="major.value"
                            :label="major.label"
                            :value="major.value"
                    ></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="研究方向" prop="research_field">
                <el-input v-model="form.research_field" auto-complete="off"></el-input>
            </el-form-item>

            <el-form-item label="入学年月" prob="entrance_date">
                <el-date-picker
                        v-model="form.entrance_date"
                        type="date"
                        placeholder="选择日期"
                >
                </el-date-picker>
            </el-form-item>

            <el-form-item label="导师姓名" prop="tutor">
                <el-input v-model="form.mentor_name" auto-complete="off"></el-input>
            </el-form-item>

            <el-form-item label="论文题目" prop="thsis_title">
                <el-input v-model="form.thsis_title" auto-complete="off"></el-input>
            </el-form-item>

            <el-form-item label="论文撰写开始时间" prop="spell">
                <el-date-picker
                        v-model="form.start_date_of_thsis"
                        type="date"
                        placeholder="选择日期"
                >
                </el-date-picker>
            </el-form-item>

            <el-form-item label="论文撰写结束时间" prop="gender">
                <el-date-picker
                        v-model="form.end_date_of_thsis"
                        type="date"
                        placeholder="选择日期"
                >
                </el-date-picker>
            </el-form-item>

            <el-form-item label="论文答辩时间" prop="country">
                <el-date-picker
                        v-model="form.defense_date_of_thsis"
                        type="date"
                        placeholder="选择日期"
                >
                </el-date-picker>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm()">提交申请</el-button>
                <el-button type="info" @click="resetForm">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import axios from "axios";
// import { mapState } from "vuex";
export default {
    data() {
        return {
            form: {
                student_id: "",
                student_name: "",

                college: "",
                colleges: [],

                student_major: "",
                student_majors: [
                    {
                        value: 1,
                        label: "软件工程",
                    },
                    {
                        value: 2,
                        label: "嵌入式",
                    },
                    {
                        value: 3,
                        label: "密码学",
                    },
                ],
                entrance_date: "",
                mentor_name: "",

                thsis_title: "",
                start_date_of_thsis: "",
                end_date_of_thsis: "",
                defense_date_of_thsis: "",
            },

            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [
                    {
                        text: "今天",
                        onClick(picker) {
                            picker.$emit("pick", new Date());
                        },
                    },
                    {
                        text: "昨天",
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit("pick", date);
                        },
                    },
                    {
                        text: "一周前",
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit("pick", date);
                        },
                    },
                ],
            },
        };
    },
    methods: {
        submitForm() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    // TODO: 提交表单数据
                    axios({
                        method: "PUT",
                        url: "http://localhost:8081/api/degree/" + this.form.student_id,
                    }).then((response) => {
                        console.log(response);
                        // 提交成功后弹出提示
                        this.$message({
                            message: "提交成功",
                            type: "success",
                        });
                    });
                    // var tag = document.getElementById("is_saved");
                    // console.log(tag);
                    // tag.innerHTML = "已保存";
                    // tag.className = "el-tag el-tag--success el-tag--light";
                }
            });
        },
        resetForm() {
            this.$refs.form.resetFields();
        },
    },
    computed: {
        // ...mapState("user", ["token"]),
    },
    created() {
        console.log("这里", this.token);
        axios({
            method: "GET",
            url:
                "http://localhost:8081/api/user/info?identity=" +
                0 +
                "&token=" +
                this.token,
        }).then((response) => {
            console.log(response.data.data);
            this.form.student_id = response.data.data.student_id;
            this.form.student_name = response.data.data.student_name;

            axios({
                method: "GET",
                url: "http://localhost:8081/api/institute/list",
            }).then((response) => {
                console.log(response.data.data);
                var facult = response.data.data;
                var i = 0;
                for (i = 0; i < facult.length; i++) {
                    this.form.colleges.push({ value: i, label: facult[i] });
                }
            });
        });
    },
};
</script>

<style scoped>
/* .form-container {
    display: flex;
    justify-content: center;
  } */
.form {
    margin-top: 20px;
    width: 95%;
}
</style>
